<!-- 处理 -->
<template>
  <a-modal
    class="handle-modal"
    :visible="handlevisible"
    title="处理"
    :mask-closable="false"
    unmount-on-close
    width="40vw"
    @cancel="handleclose"
  >
    <page-form class="page-form" :model="form" ref="formRef" layout="vertical">
      <page-form-item field="remark" label="处理原因" :rules="{ message: '请输入处理原因', required: true }" required size="1">
        <a-textarea :disabled="status === 1" class="textarea-in" placeholder="请输入" :max-length="200" v-model="form.remark" auto-size />
      </page-form-item>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="handleclose">关闭</a-button>
        <a-button type="primary" @click="handleok">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup name="handle">
  import { ref } from 'vue'

  const props = defineProps({
    status: Number,
  })
  const form = ref({})
  const emit = defineEmits(['conform'])
  let handlevisible = ref(false)
  const formRef = ref(null)
  const open = (record) => {
    handlevisible.value = true
    form.value.id = record.id
    form.value.remark = record.remark
  }
  const handleok = () => {
    if (props.status !== 1) {
      formRef.value.validate((error) => {
        if (error) {
          return false
        } else {
          emit('conform', form)
        }
      })
    } else {
      handlevisible.value = false
    }
  }
  const handleclose = () => {
    handlevisible.value = false
  }
  defineExpose({
    open,
    handleclose,
  })
</script>

<style lang="less" scoped>
  :deep(.arco-row) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  :deep(.arco-modal-body) {
    padding: 10px 80px !important;
  }
  :deep(.arco-col) {
    padding: 10px !important;
  }
</style>
